<template>
  <div class="mainIndex">
    <!-- 轮播图 -->
    <el-carousel :interval="5000" arrow="always" height="700px">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <div
          class="banner-image"
          :style="`
                background:url(${item.src}) center center no-repeat;
                background-size:cover;
                `"
        />
      </el-carousel-item>
    </el-carousel>

    <!-- 搜索功能 监听键盘回车事件加.native,穿透 -->
    <div class="search">
      <span class="search-span" @click="searchFn"> 搜索 <i></i></span>
      <el-input
        placeholder="请输入想搜索的地区"
        v-model="value"
        @keydown.enter.native="searchFn"
      >
        <i
          slot="suffix"
          class="el-input__icon el-icon-search"
          @click="searchFn"
        ></i>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        { src: require("../assets/11.png") },
        { src: require("../assets/13.png") },
        { src: require("../assets/18.png") },
        { src: require("../assets/16.png") },
      ],
      value: "",
    };
  },
  methods: {
    searchFn() {
      this.$router.push({
        path: "/index/propertyList",
        query: {
          title_contains: this.value,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mainIndex {
  position: relative;
  height: 100%;
  text-align: center;
  .banner-image {
    width: 100%;
    height: 100%;
  }
  .search {
    position: absolute;
    transform: translateX(-50%);
    top: 40%;
    left: 50%;
    z-index: 99;
    cursor: pointer;
    .el-input {
      width: 300px;
      border: 0;
    }

    .search-span {
      display: inline-block;
      position: absolute;
      top: -34px;
      width: 54px;
      height: 35px;
      font-size: 15px;
      line-height: 35px;
      text-align: center;
      padding-left: 10px;
      background: #f0eeef;
      i {
        position: relative;
        top: -28px;
        left: 19px;
        width: 0;
        height: 0;
        border-bottom: 35px solid #f0eeef;
        border-right: 15px solid transparent;
      }
    }

    .el-icon-search {
      color: #000;
      font-size: 17px;
      cursor: pointer;
    }
  }
}
</style>